import React, { Component } from 'react';
import { connect } from 'dva';
import { Alert,Form, Button,message,Modal } from 'antd';
import PTable from "../../../components/Pro/PTable";

import './less/medical.less';
import * as ajax from "../../../services/api";

const { confirm } = Modal;

@connect(state => ({
  profile: state.profile,
}))

@Form.create()

/**
 * 缴费设置列表
 */
export default class PayBasic extends Component {
  constructor(props,context){
    super(props,context);
    this.state = {
      selectedRowIds:[], //需要删除的信息id值集合
      selectedRowNames:"", //需要删除的信息id值集合
      // listPage:[],//表格数据
      selectedRowKeys:[],
      forceUpdate: false,
      pageParm: {
        pageSize: "10",
        pageNumber: "1"
      }
    };
  }

  componentDidMount() {
    this.getRecList();
  }

  //列表从后台获取数据，刷新分页列表
  getRecList = () => {
    const pageParm = {...this.state.pageParm};
    this.setState({pageParm}, () => {
      this.setState({forceUpdate: false});
    });
  };

  // 删除
  orderDelete = (orderID) => {
    ajax.delPaymentSetting({paySchemeIds:orderID}).then((data) => {
      console.log("方案删除", data);
      this.setState({
        selectedRowIds:[],
        selectedRowKeys:[],
      });
      // this.getRecList();
      this.setState({forceUpdate:true}, () => {
        this.setState({forceUpdate: false});
      });

    },(err) => {
      console.log("方案删除失败", err);
      //message.warning('方案删除失败！' + err);
    });
  };

  // 批量删除
  handleDeleteList = () =>{
    const self = this;
    const keyNumber = this.state.selectedRowIds.length;
    const keyId = this.state.selectedRowIds;
    console.log('id集合' + keyId);
    if(keyNumber <= 0){
      message.warning('请选择需要删除的方案！');
    }else{
      console.log(this.state.selectedRowIds);
      confirm({
        title: "删除方案" + this.state.selectedRowNames + "删除后方案不可找回。是否确认删除？",
        okText: '确认',
        cancelText: '取消',
        onOk() {
          self.orderDelete(keyId);
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    }
  };

  //表格渲染
  checkPayContent = () =>{
    // const pageInitStudent = {
    //   defaultPageSize: 10,
    //   showQuickJumper: true,
    //   pageSizeOptions: ["5", "10", "15", "20", "25"],
    //   showSizeChanger: true,
    //   showTotal: () => { return '共 ' + this.state.total + ' 条数据'; }
    // };

    const columns = [{
      title: '方案名称',
      dataIndex: 'schemeName',
      key:'schemeName',
      render: text => <span>{text}</span>,
    }, {
      title: '员工数',
      dataIndex: 'perCnt',
      key:'perCnt',
    }, {
      title: '有效期',
      dataIndex: 'deadline',
      key:'deadline',
    },{
      title: '状态',
      dataIndex:'isEffect',
      key:'isEffect',
      render: (text, record) => (
        <div>
          <span className={record.isEffect === 1 ? 'activated' : 'inactivated'}>·</span>
          <span className="status">{record.isEffect === 1 ? '正常' : '过期'}</span>
        </div>
      )
    }, {
      title: '添加时间',
      dataIndex: 'createTime',
    }, {
      title: '操作',
      render: (text, record) => (
        <span style={{ color: "#108EE9", cursor: "pointer" }} onClick={() => {
          this.props.history.push(`/PersonnelRecruitment/proporset/${record.paySchemeId}`);
        }}
        >修改</span>
      )
    }];
    const selectedRowKey = this.state.selectedRowKeys;

    //行绑定事件，根据TABLE的API进行设置
    const rowSelection = {
      selectedRowKeys:selectedRowKey,

      onChange: (selectedRowKeys) => {
        console.log('OnChange事件：',selectedRowKeys);
        this.setState({
          selectedRowKeys,
        },()=>{
          console.log('selectedRowKeys-more',this.state.selectedRowKeys);
        });
      },
      onSelect: (record, selected, selectedRows) => {
        const selectId = this.state.selectedRowIds;
        if(selected === true){
          selectId.push(record.paySchemeId);
        }else{
          for(let i = 0; i < selectId.length; i++) {
            if(selectId[i] === record.paySchemeId) {
              selectId.splice(i, 1);
              break;
            }
          }
        }
        //根据选中的列表，进行获取列表名称
        let names = this.state.selectedRowNames;
        names = "";
        selectedRows.map((val, key) => {
          names += ("[" + val.schemeName + "]、");
        });
        this.setState({
          selectedRowIds: selectId,
          selectedRowNames : names
        });
        console.log(`选中的名称:`,names);
        console.log(`record:`,record.paySchemeId,`selected:`, selected,`selectedRows:`, selectedRows);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        let selectId = [];

        if(selected === true){
          for(let i = 0; i < selectedRows.length; i++) {
            selectId.push(selectedRows[i].paySchemeId);
          }
        }else{
          selectId = [];
          // selectedRowKeys:selectedRowKey
        }

        //根据选中的列表，进行获取列表名称
        let names = this.state.selectedRowNames;
        names = "";
        selectedRows.map((val, key) => {
          names += ("[" + val.schemeName + "]、");
        });
        this.setState({
          selectedRowIds: selectId,
          selectedRowNames : names
        });
        console.log(`ALL选中的名称:`,names);
        console.log(`selected:`,selected,`selectedRows:`,selectedRows,`changeRows:`, changeRows);
      },
    };

    // const tmp = this.state.listPage.map((val, i) => {
    //   const value = val;
    //   value.key = i + 1;
    //   return value;
    // });

    return (
      <PTable
        style={{ marginTop:'16px' }}
        forceUpdate={this.state.forceUpdate}
        url="getPaymentSettingListPage"
        columns={columns}
        pageParm={this.state.pageParm}
        showTotal
        rowSelection={rowSelection}
        // dataSource={tmp}
        // pagination={pageInitStudent}
         />
    );
  };

  render() {
    return (
      <div className="medical-pay">
        <Alert message="设置缴交比例方案后，需要添加员工至方案方可生效。设置成功后次月自动生成医社保费用记录！" type="warning" showIcon />
        <div className="pay-button">
          <Button style={{ marginRight:'8px' }} onClick={() => { this.props.history.push(`/PersonnelRecruitment/medicalrecord`); }}>返回</Button>
          <Button type="primary" style={{ marginRight:'8px' }} onClick={() => {
            this.props.history.push(`/PersonnelRecruitment/proporset/${'00'}`);
          }}>新增缴交比例</Button>
          <Button type="danger" ghost onClick={this.handleDeleteList}>删除</Button>
        </div>
        {this.checkPayContent()}
      </div>
    );
  }
}



